import styled from 'styled-components';
import { useParams, useNavigate } from 'react-router-dom';
import { OsType, type } from "@tauri-apps/plugin-os";
import React, { CSSProperties, FC, useCallback, useEffect, useState } from 'react';

import { InstalledApplication, ProjectApplication } from '@/services/local';
import { Spin } from 'antd';

export interface ApplicationAgentPageProps {
    style?: CSSProperties;
    application: InstalledApplication | ProjectApplication
}

export const ApplicationH5Page: FC<ApplicationAgentPageProps> = (props) => {

    const { application } = props;

    const navigate = useNavigate();

    const [loading, setLoading] = useState<boolean>(false);

    const [url, setUrl] = useState<string | null>(null);

    const [version, setVersion] = useState<number>(0);

    useEffect(() => {
        let pathIdentifier = `${application.project_identifier}_${application.identifier}`;
        let url = `rrg01://${pathIdentifier}.localhost/index.html`;
        if (type() === 'windows') {
            url = `http://rrg01.${pathIdentifier}.localhost${item.main}`;
        }
        console.log(url);
        setUrl(url);
    }, []);

    if (!url) {
        return <Container>
            <Spin></Spin>
        </Container>
    }

    return <Container>
        <IframeContainer src={url}></IframeContainer>
    </Container>
}

const Container = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FFFFFF;
`;

const IframeContainer = styled.iframe`
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
`;

export default ApplicationH5Page;